<template>
  <div class="">
    <div>
      <sec-form
        :searchBox="{ span: 7 }"
        :span="8"
        label-width="80px"
        :ruleForm="sForm.ruleForm"
        :formData="sForm.formData"
        @reset="getTableList(true)"
        @submitForm="getTableList(true)"
      >
      </sec-form>
    </div>
    <div class="divider"></div>
    <div class="table-box">
      <sec-table :tableData="tableData" :tableCol="sTable.cols" ref="secTabel" align="left">
        <template v-slot:scene="{ data }">
          <el-tag
            v-for="(item, index) in data.row.scene"
            :key="index"
            @click="sceneClick(item)"
            style="margin:4px;cursor:pointer"
          >
            {{ item }}
          </el-tag>
        </template>
      </sec-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    tableData: Array,
  },
  components: {},
  data() {
    return {
      sForm: {
        ruleForm: {
          sceneName: "",
          itemName: "",
        },
        formData: [
          { type: "text", label: "场景名称", prop: "sceneName" },
          { type: "text", label: "指标名称", prop: "itemName" },
        ],
      },
      sTable: {
        rows: [],
        cols: [
          { type: "slot", label: "关联场景", prop: "scene" },
          { label: "指标名称", prop: "name" },
          { label: "指标要求", prop: "reportItemContent" },
          { label: "安全建议", prop: "repairRecommend" },
          {
            type: "operation",
            width: 100,
            label: "操作",
            children: [
              {
                label: "关注",
                disabled: () => {
                  return false;
                },
                click: () => {
                  this.utils.$confirm(
                    { content: "是否将该数据标记为“关注？标记成功之后可在「审计要求-关注」tab下进行查看" },
                    () => {
                      console.log("关注成功");
                    },
                  );
                },
              },
            ],
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {},
  methods: {
    sceneClick(item) {
      this.sForm.ruleForm.sceneName = item;
      this.getTableList();
    },
    getTableList() {
      let { itemName, sceneName } = this.sForm.ruleForm;
      consultDetailListApi({
        pageNum: this.page,
        pageSize: this.pageSize,
        consultId: this.query.id,
        itemName: itemName,
        sceneName: sceneName,
      }).then((res) => {
        this.sTable.rows = res.data;
        this.totalSize = res.count;
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
::v-deep .question-main {
  margin: 0;
}
.divider {
  height: 1px;
  background: #f0f0f0;
  margin: 10px -15px;
}
.table-box {
  margin-top: 20px;
}
</style>
